<template>
	<view class="contener">
		<skeleton :skeleton="skeleton" :loading="loading">
			<block>
				<view class="contenerBox">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval">
						<swiper-item v-if="video">
							<video class="swiperimg" :src="video" autoplay="true"
								enable-progress-gesture="false"></video>
						</swiper-item>
						<swiper-item v-for="(item,index) in data" :key="index">
							<image class="swiperimg" :src='item' mode="aspectFit" @click="clickImg(item)"></image>
						</swiper-item>
					</swiper>
					<view class="biaotiBox">
						<!-- <text class="biaotiTitle">包邮</text> -->
						{{productDetail.title}}
						<!-- 榴力量d197猫山王榴莲正宗马来西亚进口液氮冷冻新鲜水果 -->
					</view>
					<view class="bottomCont">
						<view class="cont">
							<view class="priceTit">
								<view style="color: #ff7800;">
									<view v-if="productDetail.type==0||productDetail.type==2"><text
											class="food-price">采摘价格:</text>￥{{productDetail.price}}</view>
									<view v-if="productDetail.type==1||productDetail.type==2"><text
											class="food-price">种植价格:</text>￥{{productDetail.growPrice}}</view>
								</view>
								<view><text
										style="text-decoration: none;font-size: 30rpx;color: #949393;">销量:{{productDetail.sale}}</text>
								</view>
							</view>
						</view>
					</view>

					<view class="pricetiBox">
						<view class="contener700  textSize">
							<view class="shopTitle">商品简介</view>
							<text class="overview"> {{productDetail.overview}}</text>
						</view>
					</view>

					<view>
						<view @click="goEvaList()">
							<uni-evaluate :list-data="evaList" :rate="rate" />
						</view>
					</view>
					<!-- <view class="evaluationBox" v-if="usEvaluate">
						<view class="contener700 between">
							<view>用户评价</view>
							<view>
								<view class="center_horizontal ">
									<view>查看更多</view>
									<image class="icon_next" src="../../static/images/mine/icon_next.png" mode="">
									</image>
								</view>
							</view>
						</view>
						<view class="contener700" style="margin-top: 10rpx;">
							<view class="between">
								<view class="center_horizontal moreBox">
									<image class="avatarUrl" :src="result.avatar"></image>
									<view class="name">{{result.nick}}</view>
								</view>
								<view class="moreBox">
									2021.10.10
								</view>
							</view>
							<view>
								{{usEvaluate.content}}
							</view>
							<view class="between">
							</view>
						</view>
						<view class="contener700" style="margin-top: 10rpx;">
							<view class="between">
								<view class="center_horizontal moreBox">
									<image class="avatarUrl" :src="result.avatar"></image>
									<view class="name">{{result.nick}}</view>
								</view>
								<view class="moreBox">
									2021.10.10
								</view>
							</view>
							<view>
								{{usEvaluate.content}}
							</view>
							<view class="between">
							</view>
						</view>
					</view> -->
					<view class="shopDetails">
						<view class="shopTitle" text="商品详情">商品详情</view>
						<view class="center_horizontal" style="width:750rpx;">
							<view class="informationBox2">
								<view>
									<view style="margin-bottom:15rpx;">
										<rich-text :nodes="productDetail.content"></rich-text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- <view class="shopBottomBox">
					<button class="sharebox" open-type="share">分享</button>
					<view class="zhaibox" v-if="productDetail.type==0||productDetail.type==2" @tap="tzwoyaozhaiOrder">
						我要摘
					</view>
					<view class="zhaibox" v-if="productDetail.type==1||productDetail.type==2"
						style="background-color: #3cc51f;" @tap="tzwoyaozhongOrder">
						我要种
					</view>
				</view> -->
				<view class="goods-carts">
					<uni-goods-nav :options="option" :fill="true" :button-group="showGroup" @click="onClick"
						@buttonClick="buttonClick" />
				</view>

				<!-- 	<Drag @dragClick="dragClick"  background="transparent" creatTop='500'
				image="../static/logo.png" imageWidth="84%" text="23333" :show="show"></Drag> -->

			</block>
		</skeleton>
	</view>

</template>

<script>
	import cartcontrol from '@/components/cartcontrol.vue'
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	import Drag from '@/components/beyondGod-drag/beyoundGod-drag.vue'
	import uniEvaluate from '../../components/xiujun-evaluate/uni-evaluate.vue';
	export default {
		components: {
			uniEvaluate,
			cartcontrol,
			Skeleton,
			Drag
		},
		data() {
			return {
				rate: "",
				evaList: [],
				itemId: "",
				// 底部栏
				options: [{
					icon: 'icon-fenxiangfangshi',
					text: '分享'
				}, {
					icon: 'icon-dianpufill',
					text: '预约摘菜',
				}, {
					icon: 'icon-custom-service',
					text: '客服',
				}],
				option: [],
				showGroup: [], // 要展示的按钮
				customButtonGroup1: [{
					text: '我要摘',
					backgroundColor: 'linear-gradient(90deg, #61b94b, #acda47)',
					color: '#fff'
				}, {
					text: '我要种',
					backgroundColor: 'linear-gradient(90deg, #3aadffd1, #638ce6)',
					color: '#fff'
				}],


				placeholder: '开始输入...',
				avatarUrl: '',
				nickName: '大苏打',
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				// duration: none,
				productDetail: [],
				data: [],
				usEvaluate: false,
				result: [],
				video: '',

				loading: true,
				skeleton: [
					'card-lg',
					'line*2',
					40,
					'line*2',
					'card-lg',
				], //骨架屏
			}
		},
		//分享
		onShareAppMessage(res) {
			let usId = uni.getStorageSync("usId")
			let route = this.$mp.page.route;
			this.share.path = route + `?&parentId=${uni.getStorageSync("usId")}&itemId=` + this.itemId
			this.share.imageUrl=""
			return this.share
		},
		onShareTimeline(){
			// this.share.imageUrl=""
			this.share.title="快来体验新鲜"+productDetail.title+"的摘种体验吧!"
			return this.share
		},
		onLoad(e) {
			if (e.parentId != "" && e.parentId != undefined) {
				e.id = e.itemId
				uni.setStorageSync("parentId", e.parentId)
			} else {
				this.itemId = e.id
			}
			this.getDetail(e)
		},
		methods: {
			goEvaList() {
				uni.navigateTo({
					url: "/pageA/evaList/evaList?id=" + this.productDetail.id + "&type=" + 1
				})
			},
			getDetail(e) {
				//请求
				this.$axios({
					url: `user/public/plot/productDetail`,
					method: "post",
					data: {
						id: e.id
					}
				}).then((res) => {
					this.productDetail = res.result.detail
					this.productDetail.merchantPhone=res.result.merchantPhone
					this.productDetail.plotAvatar=res.result.plotAvatar
					this.productDetail.plotName=res.result.plotName					
					
					if (this.productDetail.video) {
						this.video = this.$reqConfig.URLIMAGE + this.productDetail.video
					}
					console.log('视频', this.productDetail.video)
					this.plotAddress = res.result.plotAddress
					this.result = res.result //所有返回
					if (this.productDetail.content.indexOf(this.$reqConfig.URLIMAGE) == -1) {
						this.productDetail.content = this.productDetail.content.replace(/src="/gi,
							'src=' + '\"' + this.$reqConfig.URLIMAGE)
					}
					let imgarr = JSON.parse(this.productDetail.img)
					let newimgarr = []
					imgarr.forEach(item => {
						newimgarr.push(this.$reqConfig.URLIMAGE + item)
					})
					this.data = newimgarr
					//判断有没有评论
					if (res.result.usEvaluate) {
						this.usEvaluate = res.result.usEvaluate
						console.log('pinglun', this.usEvaluate)
					}

					// 处理底部按钮
					if (this.productDetail.type == 2) {
						this.showGroup = this.customButtonGroup1
						this.option = [this.options[0], this.options[1]]
					} else if (this.productDetail.type == 0) {
						this.showGroup = [this.customButtonGroup1[0]]
						this.option = [this.options[0], this.options[1]]
					} else {
						this.option = [this.options[0], this.options[2]]
						this.showGroup = [this.customButtonGroup1[1]]
					}
					this.option.push(this.options[2])
					this.evaList = res.result.eva
					this.rate = res.result.rate
					// 骨架屏取消
					this.loading = false;
					//分享进来的，渲染完成后判断是否登录过，没有登录就跳去登录
					let token = uni.getStorageSync("token")
					let avatarUrl = uni.getStorageSync("avatarUrl")
					if (!token || !avatarUrl) {
						uni.navigateTo({
							url: "../mine/loginPage"
						})
					}

				})
			},
			// 悬浮按钮点击
			dragClick() {	
				this.show = false
				console.log("点击悬浮按钮");
				this.tzwoyaozhaiOrder(1)
			},
			// 底部栏按钮
			onClick(e) {
				console.log("名称",this.productDetail)
				if(e.index==2){
					let usId=uni.getStorageSync("usId")
					uni.navigateTo({						
						url: "/pages/HM-chat/User-Chat?id=" + usId + "&sendid=" + this.productDetail.merchantId + "&title=" + this.productDetail.plotName +
							"&avatar=" + this.productDetail.plotAvatar
					})
				}
				if (e.index == 1) {
					if (e.content.text == "预约摘菜") {
						this.tzwoyaozhaiOrder(1)
					} else {
						uni.navigateTo({
							url: `../growVegetables/shopList?id=${this.productDetail.merchantId}`
						})
					}
				}
			},
			buttonClick(e) {
				console.log(e.content.text)
				if (e.content.text == '我要摘') {
					this.tzwoyaozhaiOrder()
				} else {
					this.tzwoyaozhongOrder()
				}
				return
			},

			// 点击图片放大
			clickImg(url) {
				wx.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},

			tzwoyaozhaiOrder(e) {
				let product = {
					address: this.plotAddress,
					productDetail: this.productDetail
				}
				uni.navigateTo({
					url: './woyaozhaiOrder?product=' + encodeURIComponent(JSON.stringify(product)) + '&type=' + e
				})
			},
			tzwoyaozhongOrder() {
				let product = {
					address: this.plotAddress,
					productDetail: this.productDetail
				}
				uni.navigateTo({
					url: './woyaozhongOrder?product=' + encodeURIComponent(JSON.stringify(product))
				})
			},
			onEditorReady() {
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
				// #endif

				// #ifdef APP-PLUS || H5 ||MP-WEIXIN
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
				// #endif
			},
			undo() {
				this.editorCtx.undo()
			},

			addCart: function(item) {
				console.log('item', item)
				if (item.count >= 0) {
					item.count++
					this.goods.forEach((good) => {
						good.foods.forEach((food) => {
							// 根据名字添加购物车,实际环境根据需要更改
							if (item.name == food.name) {
								food.count = item.count
								// this.catrgoryList.push(item)
								// console.log('列表',this.catrgoryList)
							}
						})
					})
				} else {
					console.log('add')
					this.goods.forEach((good) => {
						good.foods.forEach((food) => {
							if (item.name == food.name)
								Vue.set(food, 'count', 1)
						})
					})
				}
			},
			decreaseCart(item) {
				this.catrgoryList.push(item)
				console.log('列表', this.catrgoryList)
				if (item.count) {
					item.count--
					this.goods.forEach((good) => {
						good.foods.forEach((food) => {
							if (item.name == food.name)
								food.count = item.count
						})
					})
				}
			},
			// 清空购物车
		}
	}
</script>

<style scoped>
	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}

	.overview {
		display: inline-block;
		vertical-align: top;
		width: 100%;
	}

	.textSize {
		font-size: 32rpx;
		color: #00000082;
	}

	.bottomCont {
		background-color: #fff;
	}

	.bottomCont .cont {
		padding: 0 20rpx 20rpx;
	}

	.priceTit {
		color: #6d6d6d;
		font-size: 40rpx;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.priceTit text {
		font-size: 32rpx;
		color: #949393;
		/* margin-left: 20rpx; */
		font-weight: normal;
	}

	.contenerBox {
		width: 100%;
		height: calc(100vh - 10rpx);

	}

	.swiper {
		width: 750rpx;
		margin-bottom: 10rpx;
		height: 750rpx;
	}

	.swiperimg {
		width: 750rpx;
		height: 750rpx;
	}

	.biaotiBox {
		text-align: left;
		/* width: 750rpx; */
		background-color: #fff;
		font-weight: bold;
		padding: 20rpx;
	}

	.informationBox2 {
		height: 100%;
		border-radius: 15rpx;
		width: 700rpx;
		background-color: #fff;
	}

	.pricetiBox {
		margin: 15rpx 0;
		padding: 20rpx 0;
		width: 750rpx;
		background-color: #fff;
	}

	.biaotiTitle {
		background-color: #4CD964;
		color: #fff;
		border-radius: 10rpx;
		padding: 0 10rpx;
		margin-right: 10rpx;
	}

	.food-price {
		color: #f01414;
		font-size: 16px;
	}

	.evaluationBox {
		padding: 15rpx 0;
		width: 750rpx;
		background-color: #fff;
	}

	.icon_next {
		margin-top: 7rpx;
		height: 30rpx;
		width: 30rpx;
	}

	.avatarUrl {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #c4c4c4;
	}

	.name {
		margin-left: 15rpx;
	}

	.moreBox {
		height: 60rpx;
		line-height: 60rpx;
	}

	.evaluationImg {
		margin-top: 15rpx;
		height: 150rpx;
		width: 150rpx;
		border-radius: 15rpx;
	}

	.shopDetails {
		padding-top: 15rpx;
		margin-top: 15rpx;
		width: 750rpx;
		height: 100%;
		background-color: #fff;
	}

	.shopDetailsimg {
		width: 750rpx;
		height: 100%;
	}

	.shopBottomBox {
		height: 100rpx;
		width: 750rpx;
		background-color: #fff;
		align-items: center;
		display: flex;
		border: #CCCCCC 0.5rpx solid;
	}

	.shopBottomText {
		font-size: 22rpx;
	}

	.sharebox {
		width: 150rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-right: 20rpx;
		border-radius: 30rpx;
		background-color: #00A0DC;
		text-align: center;
		color: #fff;
	}

	.zhaibox {
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-right: 20rpx;
		border-radius: 30rpx;
		text-align: center;
		color: #fff;
		background-color: #F0AD4E;
	}

	.collectionimg {
		width: 40rpx;
		height: 40rpx;
	}

	.editorBox {
		padding: 10px;
	}

	#editor {
		width: 100%;
		height: 300px;
		background-color: #CCCCCC;
	}

	.shopBottomBox {
		position: fixed;
		bottom: 0;
		height: 100rpx;
		line-height: 100rpx;
		width: 750rpx;
		background-color: #fff;
		display: flex;
		justify-content: flex-end;
	}
</style>
